<template>
	<view>
		<uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回"   title="维修详情"  @clickLeft="back"  :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	     
		 <view class="list" >
		    <view class="title" ><span class="left">维修编号：</span>{{information.repairNo}}</view>
		    <view class="desc"><span class="left">机器编号:</span>{{information.machineNo}}</view>
		    <view class="desc"><span class="left">租赁订单编号:</span>{{information.orderNo}}</view>
		    <view class="desc">
				<span class="left">维修类型:</span>
		 		   <span v-if="information.repairType==0" class='bgc'>维修</span>
		 		   <span  v-if="information.repairType==1"  class='bgc'>退回</span>
		    </view>
		 </view>
		 <!-- 基本信息 -->
		 <view style="background-color: #fff;margin-top: 5px;">
			 <u-cell>
			 	<template #title>
			 		<view style="font-size: 12px;">基本信息</view>
			 	</template>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">维修编号</text>
			 		<text class="u-cell-text">{{information.repairNo}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">租赁订单编号</text>
			 		<text class="u-cell-text">{{information.orderNo}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">发起人</text>
			 		<text class="u-cell-text">{{information.applicantName}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">维修人员</text>
			 		<text class="u-cell-text">{{information.maintenancePersonnel}}</text>
			 	</view>
			 </u-cell>
			  
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">配件费用</text>
			 		<text class="u-cell-text">{{information.repairAmount}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">人工费用</text>
			 		<text class="u-cell-text">{{information.repairAmount}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">金额合计</text>
			 		<text class="u-cell-text">{{information.repairAmount}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">维修描述</text>
			 		<text class="u-cell-text">{{information.repairDescription}}</text>
			 	</view>
			 </u-cell>
			 <u-cell>
			 	<view  slot="title" class="u-slot-title">
			 		<text class="u-cell-text">报修机器</text>
			 		
			 	</view>
			 </u-cell>
			 <view style="background-color: #fff;">
			 	<uni-table :border="true" stripe emptyText="暂无更多数据">
			 	    <uni-tr>
			 	        <uni-th align="center" width="80">机器序列号</uni-th>
			 	        <uni-th align="center" width="90">产品名称</uni-th>
			 	        <uni-th align="center" width="90">型号</uni-th>
			 	        <uni-th align="center" width="100">仓库</uni-th>
			 			<uni-th align="center" width="100">操作</uni-th>
			 			  
			 	    </uni-tr>
			 	    <uni-tr v-for="(item,index) in information.repairMachineList" :key="item.id">
			 	        <uni-td>{{item.machineSerialNumber}}</uni-td>
			 	        <uni-td>{{item.productName}}</uni-td>
			 	        <uni-td>{{item.model}}</uni-td>
			 	        <uni-td>{{item.warehouseName}}</uni-td>
			 			<uni-td >
			 				<view class="">
			 					<button @click="activateMachine2(item)" class="uni-button" size="mini" type="success">恢复使用</button>
								<button @click="activateMachine(item)" class="uni-button" size="mini" type="success">激活机器</button>
			 				</view>
			 			</uni-td>
			 	    </uni-tr>
			 	</uni-table>
			 </view>
		 </view>
	</view>
</template>

<script>
	import {detailsRepairApi} from '@/api/repair.js'
	import {machineList,modifyMachineApi} from '@/api/machine/machine.js'
	export default {
		data(){
			return{
				information:{}
			}
		},
		onLoad(option){
			console.log(option);
			this.initData(option.id)
		},
		methods:{
			// 激活机器ss
			async activateMachine(val){
				 
				await modifyMachineApi({id:val.machineId,status:'0',machineNo:val.machineNo})
				this.$refs.uToast.show({
					type:'success',
					message:'恭喜你，成功激活机器',
					
				})
			},
			// 回复使用
			async activateMachine2(){
				
				await modifyMachineApi({id:val.machineId,status:'2',machineNo:val.machineNo})
				this.$refs.uToast.show({
					type:'success',
					message:'机器可以正常使用啦',
					
				})
			},
			back(){
				uni.redirectTo({
					url:'/pages/repair/index'
				})
			},
			async initData(id){
				const res=await detailsRepairApi(id)
				console.log(res);
				this.information=res.data
			}
			
		}
	}
</script>

<style lang="scss">
	.u-slot-title{
		.u-cell-text{
			font-size: 14px;
			margin-right: 10px;
		}
	}
	.list{
		border: solid 1px #c3c3c3;
		background-color: #fff;
		padding: 10px;
		.title{
			font-size: 14px;
			font-weight: 600;
		}
		.desc{
			margin-top: 3px;
			font-size: 12px;
		}
	}
	.left{
		margin-right: 5px;
	}
	.bgc{
		width: 30px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		display: inline-block;
		color: #fff;
		background-color: #fd9540;
	}
</style>